<template>
  <div>
    <el-card>
      <el-row :gutter="20" class="s_row">
        <el-col :span="2">
          <el-button
            type="info"
            :disabled="btnStatus.store"
            @click="add_dialog_visible = true"
            >添加</el-button
          >
        </el-col>
      </el-row>
      <el-table :data="list" border default-expand-all row-key="id">
        <el-table-column
          label="分类名称"
          prop="title"
          fixed="left"
          width="200"
        ></el-table-column>

        <el-table-column
          label="图片"
          align="center"
          prop="image_url"
          width="60"
        >
          <template v-slot="scope">
            <el-image
              class="list_image"
              :src="scope.row.image_url"
              :preview-src-list="[scope.row.image_url]"
            >
              <div class="image-error">暂无图片</div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center" prop="sort" width="100">
          <template v-slot="scope">
            <el-input
              v-model="scope.row.sort"
              :disabled="btnStatus.sorts"
              @blur="set_sorts(scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="150">
          <template v-slot="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.status ? '显示' : '隐藏'"
              placement="top"
              :enterable="false"
            >
              <el-switch
                v-model="scope.row.status"
                :disabled="btnStatus.status"
                active-color="#5FB878"
                inactive-color="#d2d2d2"
                @change="set_status(scope.row)"
              ></el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="添加时间"
          align="center"
          prop="created_at"
          width="140"
          sortable
        ></el-table-column>
        <el-table-column
          label="编辑时间"
          align="center"
          prop="updated_at"
          width="140"
          sortable
        ></el-table-column>
        <el-table-column label="操作" align="center" width="200" fixed="right">
          <template v-slot="scope">
            <el-button
              v-if="scope.row.level < 3"
              :disabled="btnStatus.create_sublevel"
              type="warning"
              icon="iconfont icon-xiaji"
              size="mini"
              @click="sublevel(scope.row)"
              >添加子级</el-button
            >
            <el-button
              :disabled="btnStatus.edit"
              type="primary"
              icon="iconfont icon-bianji"
              size="mini"
              @click="edit(scope.row.id)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加子级对话框 -->
    <el-dialog
      title="添加子级"
      v-model="sublevel_dialog_visible"
      :width="$config.percentage_width"
      @close="sublevel_dialog_close"
    >
      <!-- 主体区 -->
      <el-form
        label-width="100px"
        :model="sublevel_form"
        :rules="rules"
        ref="sublevel_ref"
      >
        <el-form-item label="父级">
          <el-input v-model="sublevel_form.sublevel_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="分类名称" prop="title">
          <el-input
            placeholder="请输入分类名称"
            maxlength="30"
            clearable
            show-word-limit
            v-model="sublevel_form.title"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="image_id">
          <s-file-image @confirm_imsge="sublevel_confirm_image"></s-file-image>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input
            type="number"
            placeholder="请输入排序"
            maxlength="10"
            clearable
            show-word-limit
            v-model="sublevel_form.sort"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
      <span class="dialog-footer">
        <el-button @click="sublevel_dialog_visible = false">取 消</el-button>
        <el-button
          :disabled="btnStatus.create_sublevel"
          type="primary"
          @click="create_sublevel()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 添加对话框 -->
    <el-dialog
      title="添加"
      v-model="add_dialog_visible"
      :width="$config.percentage_width"
      @close="add_dialog_close"
    >
      <!-- 主体区 -->
      <el-form
        label-width="100px"
        :model="add_form"
        :rules="rules"
        ref="add_ref"
      >
        <el-form-item label="分类名称" prop="title">
          <el-input
            placeholder="请输入分类名称"
            maxlength="30"
            clearable
            show-word-limit
            v-model="add_form.title"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="image_id">
          <s-file-image
            @confirm_imsge="add_confirm_image"
            :key="timer"
          ></s-file-image>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input
            type="number"
            placeholder="请输入排序"
            maxlength="10"
            clearable
            show-word-limit
            v-model="add_form.sort"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
      <span class="dialog-footer">
        <el-button @click="add_dialog_visible = false">取 消</el-button>
        <el-button :disabled="btnStatus.store" type="primary" @click="add()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog
      title="编辑"
      v-model="edit_dialog_visible"
      :width="$config.percentage_width"
      @close="edit_dialog_close"
    >
      <!-- 主体区 -->
      <el-form
        label-width="100px"
        :model="edit_form"
        :rules="rules"
        ref="edit_ref"
      >
        <el-form-item label="分类名称" prop="title">
          <el-input
            placeholder="请输入分类名称"
            maxlength="30"
            clearable
            show-word-limit
            v-model="edit_form.title"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="image_id">
          <s-file-image
            :image_list="image_list"
            :key="timer"
            @confirm_imsge="edit_confirm_image"
          ></s-file-image>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input
            type="number"
            placeholder="请输入排序"
            maxlength="10"
            clearable
            show-word-limit
            v-model="edit_form.sort"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
      <span class="dialog-footer">
        <el-button @click="edit_dialog_visible = false">取 消</el-button>
        <el-button
          :disabled="btnStatus.edit"
          type="primary"
          @click="edit_send()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import sFileImage from "@/components/s-file-image/s-file-image.vue";
export default {
  components: {
    "s-file-image": sFileImage
  },
  data() {
    var checkSort = (rule, value, callback) => {
      // 定义正则表达式
      const regSort = /^[1-9]{1}[0-9]{0,10}$/;
      if (regSort.test(value)) {
        return callback();
      }
      callback(new Error("请输入排序（大于0的数字）!"));
    };
    return {
      btnStatus: this.is_string(
        {
          sorts: "shop/product_type/status",
          status: "shop/product_type/store",
          store: "shop/product_type/edit",
          edit: "shop/product_type/create_sublevel",
          destroy: "shop/product_type/sorts"
        },
        this
      ),
      // 添加对话框是否显示
      add_dialog_visible: false,
      // 编辑对话框是否显示
      edit_dialog_visible: false,
      // 添加子级对话框是否显示
      sublevel_dialog_visible: false,
      add_form: {
        pid: 0,
        level: 1,
        title: "",
        image_id: "",
        sort: 1
      },
      edit_form: {
        id: "",
        title: "",
        image_id: "",
        image_url: "",
        sort: 1
      },
      image_list: [],
      sublevel_form: {
        sublevel_name: "",
        pid: "",
        level: "",
        title: "",
        image_id: "",
        sort: 1
      },
      timer: "",
      rules: {
        title: [
          { required: true, message: "请输入分类名称！", trigger: "blur" }
        ],
        sort: [
          { required: true, message: "请输入排序！", trigger: "blur" },
          { validator: checkSort, trigger: "blur" }
        ]
      },
      list: [] // 列表数据
    };
  },
  created() {
    this.get_list();
  },
  methods: {
    // 获取列表
    get_list() {
      this.$base.request(
        {
          that: this,
          url: "shop/product_type/index"
        },
        res => {
          if (res.code === 8888) {
            this.list = res.data;
          }
        }
      );
    },
    // 菜单状态
    set_status(info) {
      this.$base.request(
        {
          that: this,
          method: "PUT",
          url: "shop/product_type/status",
          data: { id: info.id, status: info.status ? 1 : 0 }
        },
        res => {
          if (res.code === 8888) {
            this.$base.message({ that: this, message: res.msg });
          } else {
            info.status = !info.status;
          }
        }
      );
    },
    // 排序
    set_sorts(info) {
      this.$base.request(
        {
          that: this,
          method: "PUT",
          url: "shop/product_type/sorts",
          data: { id: info.id, sort: info.sort }
        },
        res => {
          if (res.code === 8888) {
            this.$base.message({ that: this, message: res.msg });
          } else {
            this.get_list();
          }
        }
      );
    },
    // 监听添加对话框的关闭事件
    add_dialog_close() {
      this.timer = new Date().getTime();
      this.$refs.add_ref.resetFields();
    },
    // 添加图片回调
    add_confirm_image(res) {
      this.add_form.image_id = res[0].id;
    },
    // 添加按钮
    add() {
      this.$refs.add_ref.validate(valid => {
        if (valid) {
          this.$base.request(
            {
              that: this,
              method: "POST",
              url: "shop/product_type/store",
              data: this.add_form
            },
            res => {
              if (res.code === 8888) {
                this.$base.message({ that: this, message: res.msg });
                this.add_dialog_visible = false;
                this.get_list();
              }
            }
          );
        }
      });
    },
    // 打开编辑按钮对话框
    edit(id) {
      this.$base.request(
        {
          that: this,
          url: "shop/product_type/edit",
          data: { id: id }
        },
        res => {
          if (res.code === 8888) {
            this.edit_dialog_visible = true;
            this.edit_form = res.data;
            this.image_list = [
              {
                id: res.data.image_id,
                url: res.data.image_url
              }
            ];
          }
        }
      );
    },
    // 编辑器回调
    edit_confirm_image(res) {
      this.edit_form.image_id = res[0].id;
    },
    // 提交编辑数据
    edit_send() {
      this.$refs.edit_ref.validate(valid => {
        if (valid) {
          this.$base.request(
            {
              that: this,
              method: "PUT",
              url: "shop/product_type/update",
              data: this.edit_form
            },
            res => {
              if (res.code === 8888) {
                this.$base.message({ that: this, message: res.msg });
                this.edit_dialog_visible = false;
                this.get_list();
              }
            }
          );
        }
      });
    },
    // 监听编辑对话框的关闭事件
    edit_dialog_close() {
      this.timer = new Date().getTime();
      this.$refs.edit_ref.resetFields();
    },
    // 打开添加子级按钮对话框
    sublevel(info) {
      this.sublevel_form.pid = info.id;
      this.sublevel_form.level = info.level + 1;
      this.sublevel_form.sublevel_name = info.title;
      this.sublevel_dialog_visible = true;
    },
    // 监听添加子级对话框的关闭事件
    sublevel_dialog_close() {
      this.$refs.sublevel_ref.resetFields();
    },
    // 添加子级图片回调
    sublevel_confirm_image(res) {
      this.sublevel_form.image_id = res.image_id;
    },
    // 提交添加子级数据
    create_sublevel() {
      this.$refs.sublevel_ref.validate(valid => {
        if (valid) {
          this.$base.request(
            {
              that: this,
              method: "POST",
              url: "shop/product_type/create_sublevel",
              data: this.sublevel_form
            },
            res => {
              if (res.code === 8888) {
                this.$base.message({ that: this, message: res.msg });
                this.sublevel_dialog_visible = false;
                this.get_list();
              }
            }
          );
        }
      });
    }
  }
};
</script>
